import React, { Component } from "react";
import {
    getAllPatrolClassAndUserInfoPerSchool, getPatrolCountAndMemberRankPerSchoolByTime, getPatrolClassCompletionPerSchoolByTime,
    getPatrolClassUserAccuracyPerSchoolByTime, getAllHiddenDangerInfo, getClassHiddenDangeInfoByTime, getHiddenDangerItemInfoByTime,
    getHiddenDangerItemDetailByTime, getAllInspectClassAndMemberApi, getInspectClassMemberAndNumberApi,
    getInspectAddressAndClassMemberApi, getInspectCategoryItemNumberApi,
    getInspectCategoryAndItemApi, getInspectClassWorkPlanRankApi, getInspectPercentCountApi, exportPatrolWord, exportInspectWord, exportDutyWeekWord, downloadWord,
    getDutyWeekAllInfoByTime, getDutyWeekCheckPointInfo, getDutyWeekContentAndItem, getDutyWeekCheckNumRankByTime, getDutyWeekDeductionRankByTime, getAllPersonnelAndQuestion, getQuestionAndPersonnelRank, getAddressAndQuestionRank, getQuestionItemRank 
} from "../js/statisticswordapi.js";

import { Table, Input, InputNumber, DatePicker, Popconfirm, Form, Card, Col, Row, Statistic, Spin, message, Button, Checkbox, Progress, Alert } from 'antd';
import $ from 'jquery'
import {
    BrowserRouter as Router, Route, Link, Redirect, Switch
} from "react-router-dom";
import { saveAs } from 'file-saver'
import html2canvas from 'html2canvas';
import JsPdf from 'jspdf';
import { TimeBar } from './bigscreen.jsx'
//echarts5.0按需引入
import * as echarts from 'echarts/core';

// import ReactEcharts from 'echarts-for-react';

import {
    BarChart, PieChart, LineChart
} from 'echarts/charts';
import {
    TitleComponent,
    TooltipComponent,
    GridComponent
} from 'echarts/components';
import {
    CanvasRenderer
} from 'echarts/renderers';
echarts.use(
    [TitleComponent, TooltipComponent, GridComponent, BarChart, PieChart, LineChart, CanvasRenderer]
);

import '../css/statisticword.css'
import Item from "antd/lib/list/Item";
const { RangePicker } = DatePicker;
const { Column, ColumnGroup } = Table;
// const echarts = require('echarts');
const chartStyle = {
    height: '100%',
    width: '100%',
    margin: "0 auto"
};
export const tableStyle = {
    fontSize: '16px'
};

let imgarray1 = []
let imgarray2 = []
let imgarray3 = []
let imgarray4 = []
let imgarray5 = []
let imgarray6 = []
let imgarray7 = []
let imgarray8 = []
let imageBase64List = []
let imageBase64List2 = []

let hiddenDangerCategoryList = []
let hiddenDangerPointList = []

//巡检
let inspectCategoryItemNumber = []
let inspectAddressAndClassMember = []
let inspectClassWorkPlanArray = []

let categoryName = []
let inspectCategoryCount = []
let inspectItemCount = []
let inspectAdressCount = []
let inspectNumber = []
let inspectClassWorkMemberName = []
let inspectClassWorkDoneNumber = []
let inspectClassWorkFinishedNumber = []

let inspectClassName = []
let inspectClassPercent = []

let dateString1
let dateStringTemp

let startTime = ''
let endTime = ''
let num = 0
class StatisticsCondition extends Component {
    constructor(props) {
        super(props)
        this.state = {
            selectType: this.props.type,
            isSelectTime: 0,
            startTime: '',
            endTime: '',
        }
    }

    show = (e) => {
        if (this.state.startTime == '' || this.state.endTime == '' || this.state.isSelectTime == 0) {
            message.error('请选择开始时期和结束日期')
        }

    }
    // onChange = (e) => {
    //     console.log(e)
    //     if (e.length == 1) {
    //         if (e[0] == "巡更") {
    //             this.setState({
    //                 selectType: 1
    //             })
    //         } else if (e[0] == "巡检") {
    //             this.setState({
    //                 selectType: 2
    //             })
    //         }
    //     } else if (e.length == 2) {
    //         this.setState({
    //             selectType: 3
    //         })
    //     } else {
    //         this.setState({
    //             selectType: 0
    //         })
    //     }
    // }
    handleSelectTime = (value, dateString) => {
        console.log('选择的时间：', dateString)
        if (dateString[0] != '' && dateString[1] != '') {
            this.setState({
                startTime: dateString[0],
                endTime: dateString[1],
                isSelectTime: 1
            })
        } else {
            this.setState({
                isSelectTime: 0
            })
        }


    }
    render() {
        const options = ['巡检', '巡更'];
        const style1 = {
            marginLeft: 65, fontSize: 36, marginTop: 10
        }
        return (
            //backgroundColor: '#E8E8E8'
            <div style={{ width: '100%', height: '100%' }}>
                <div id="content" className="word">
                    <div className="timeSelect" style={{ textAlign: 'center' }}>
                        请选择统计时间范围： <RangePicker picker="week" onChange={this.handleSelectTime} />
                    </div>
                    {/* <div className="timeSelect">
                        请选择打印类型:
                        <Checkbox.Group
                            options={options}
                            style={style1}
                            onChange={this.onChange}>
                        </Checkbox.Group>
                    </div> */}
                    <div className="timeSelect2">
                        {
                            this.state.selectType == 1 && this.state.isSelectTime == 1 ?
                                (
                                    <Link to=
                                        {{
                                            pathname: '/patrol/PatrolComponent',
                                            state: {
                                                startTime: this.state.startTime,
                                                endTime: this.state.endTime,
                                            }
                                        }}
                                    >
                                        <div> <Button type="primary" onClick={this.show} style={{ marginTop: 25, width: 100 }}>巡更报表</Button></div>
                                    </Link>
                                ) : this.state.selectType == 2 && this.state.isSelectTime == 1 ?
                                    <Link to=
                                        {{
                                            pathname: '/inspect/InspectComponent',
                                            state: {
                                                startTime: this.state.startTime,
                                                endTime: this.state.endTime,
                                            }
                                        }}
                                    >
                                        <div> <Button type="primary" onClick={this.show} style={{ marginTop: 25, width: 100 }}>巡检报表</Button></div>
                                    </Link>
                                    : this.state.selectType == 3 && this.state.isSelectTime == 1 ?
                                        <Link to=
                                            {{
                                                pathname: '/dutyweek/DutyWeekComponent',
                                                state: {
                                                    startTime: this.state.startTime,
                                                    endTime: this.state.endTime,
                                                }
                                            }}
                                        >
                                            <div> <Button type="primary" onClick={this.show} style={{ marginTop: 25, width: 100 }}>值周报表</Button></div>
                                        </Link>
                                        : <div> <Button type="primary" onClick={this.show} style={{ marginTop: 25, width: 100 }}>预览报表</Button></div>

                        }

                    </div>

                </div>
            </div>
        )
    }
}

//巡检组件
class InspectComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            src: "http://47.111.158.147:8080/fileImage/123002_1607328079415.jpg",
            showimg: false,
            loadding: true,
            loadding2: false,
            percent: 0,
            isExport: 0,
            timer: 0,
            timer2: 5,
            startTime: startTime,
            endTime: endTime,
            defaultDate: true,
            inspectClassMemberAndNumber: [],
            inspectAddressAndClassMember: [],
            classAndUserInfo: [],
            UserAccuracyRate: [],
            hiddenDangerCategoryRank: [],
            hiddenDangerPointCountRankList: [],
            hiddenDangerDetailList: [],
            selectCheckbox: [],
            checkedValues: [],
            inspectDisplay: true,
            patrolDisplay: true,
            allDisplay: true,
            inspectSelect: false,
            patrolSelect: false,
            patrolChecked: false,
            inspectClassWorkPlanArray: [],
        }
    }


    componentWillMount() {
        console.log('componentWillMount将要渲染')
        if (this.props.location.state.startTime != undefined && this.props.location.state.startTime !== null &&
            this.props.location.state.endTime != undefined && this.props.location.state.endTime !== null) {
            sessionStorage.setItem("startTime", this.props.location.state.startTime);
            sessionStorage.setItem("endTime", this.props.location.state.endTime);
        }
        this.setState({
            startTime: sessionStorage.getItem("startTime"),
            endTime: sessionStorage.getItem('endTime')
        })
    }

    componentDidMount() {
        console.log('componentDidMount将要渲染')
        this.refreshdata();
    }

    exportword = () => {
        imageBase64List2 = []
        let departmentId = sessionStorage.getItem("departmentId")
        if (imgarray1[0] != undefined && imgarray1[0] != null) {
            imageBase64List2.push(imgarray1[0])
        } else {
            imageBase64List2.push("")
        }
        if (imgarray2[0] != undefined && imgarray2[0] != null) {
            imageBase64List2.push(imgarray2[0])
        } else {
            imageBase64List2.push("")
        }
        if (imgarray3[0] != undefined && imgarray3[0] != null) {
            imageBase64List2.push(imgarray3[0])
        } else {
            imageBase64List2.push("")
        }
        if (imgarray6[0] != undefined && imgarray6[0] != null) {
            imageBase64List2.push(imgarray6[0])
        } else {
            imageBase64List2.push("")
        }
        if (imgarray7[0] != undefined && imgarray7[0] != null) {
            imageBase64List2.push(imgarray7[0])
        } else {
            imageBase64List2.push("")
        }
        if (imgarray8[0] != undefined && imgarray8[0] != null) {
            imageBase64List2.push(imgarray8[0])
        } else {
            imageBase64List2.push("")
        }
        exportInspectWord(JSON.stringify(imageBase64List2), this.state.startTime, this.state.endTime, departmentId)
            .then((res) => {
                //下载文件
                const fileType = 2
                downloadWord(fileType).then((res) => {
                    console.log("res", res)
                    const url = window.URL.createObjectURL(new Blob([res.data],
                        // 设置该文件的mime类型，这里对应的mime类型对应为.xlsx格式
                        { type: 'application/msword' }));
                    const link = document.createElement('a');
                    link.href = url;
                    // 从header中获取服务端命名的文件名
                    const fileName = decodeURIComponent(res.headers['filename']);
                    link.setAttribute('download', fileName);
                    document.body.appendChild(link);
                    link.click();
                    message.success('已成功下载到本地！', 8)
                    this.setState({
                        isExport: 0,
                        loadding2: false
                    })
                })
            })
        this.setState({
            isExport: 1,
            loadding2: true
        })
    }
    back = () => {
        window.history.back();
    }

    refreshdata() {
        //1.1 巡检业务
        let departmentId = sessionStorage.getItem("departmentId")
        //传入时间测试使用
        let startTime = this.state.startTime
        let endTime = this.state.endTime
        console.log("startTime", this.state.startTime)
        $('#progress').hide();
        inspectCategoryItemNumber = []
        categoryName = []
        let hiddenDangerPointCountRankList = []
        let hiddenDangerCategoryRank = [];
        let classHiddenDangerUserList = [];
        let classHiddenDangerCountList = [];
        let hiddenDangerDetailList = [];
        hiddenDangerCategoryList = [];
        hiddenDangerPointList = [];

        getInspectCategoryItemNumberApi(departmentId)
            .then((res) => {
                inspectCategoryItemNumber = []
                categoryName = []
                res.data.inspectCategoryItemNumber.forEach((item, index) => {
                    inspectCategoryItemNumber.push({
                        value: item.inspectItemNumber,
                        name: item.categoryName,
                    });
                });
                for (var i = 0; i < res.data.inspectCategoryItemNumber.length; i++) {
                    categoryName[i] = res.data.inspectCategoryItemNumber[i].categoryName
                }

                console.log(inspectCategoryItemNumber)
                console.log(categoryName)
                this.setState({
                    inspectCategoryItemNumber: inspectCategoryItemNumber,
                    categoryName: categoryName
                })
            });

        //巡检类别xxx类，巡检项目xxx项，巡检点xxx个，各巡检点每周计划巡检xxx次
        getInspectCategoryAndItemApi(departmentId)
            .then((res) => {
                inspectCategoryCount = []
                inspectItemCount = []
                inspectAdressCount = []
                inspectNumber = []

                inspectCategoryCount = res.data.inspectCategoryAndItem.inspectCategoryCount,
                    inspectItemCount = res.data.inspectCategoryAndItem.inspectItemCount,
                    inspectAdressCount = res.data.inspectCategoryAndItem.inspectAdressCount,
                    inspectNumber = res.data.inspectCategoryAndItem.inspectNumber
                this.setState({
                    inspectCategoryCount: res.data.inspectCategoryAndItem.inspectCategoryCount,
                    inspectItemCount: res.data.inspectCategoryAndItem.inspectItemCount,
                    inspectAdressCount: res.data.inspectCategoryAndItem.inspectAdressCount,
                    inspectNumber: res.data.inspectCategoryAndItem.inspectNumber
                })
            })


        getInspectClassWorkPlanRankApi(departmentId, startTime, endTime)
            .then((res) => {

                var inspectWorkCount = []
                var inspectClassWorkPlan
                var length = res.data.inspectClassWorkPlan.length
                let inspectWorkCountPlanNumber = res.data.inspectWorkCountPlanNumber
                if(length != 0){
                    var inspectClassWorkPlanFirst = res.data.inspectClassWorkPlan[0]
                    var inspectClassWorkPlanLast = res.data.inspectClassWorkPlan[parseInt(length) - 1]
                    var inspectClassWorkPlanFirstName = inspectClassWorkPlanFirst.item || ''
                    var inspectClassWorkPlanFirstNumber = inspectClassWorkPlanFirst.total
                    var inspectClassWorkPlanLastName = inspectClassWorkPlanLast.item
                    var inspectClassWorkPlanLastNumber = inspectClassWorkPlanLast.total
                    var inspectClassWorkFirstNumber = inspectClassWorkPlanFirst.finished
                    var inspectClassWorkLastNumber = inspectClassWorkPlanLast.finished

                }
              
                inspectClassWorkMemberName = []
                inspectClassWorkDoneNumber = []
                inspectClassWorkFinishedNumber = []


                if(res.data.inspectClassWorkPlan.length == 0){
                    inspectClassWorkDoneNumber=[],
                    inspectClassWorkFinishedNumber = []
                }
                for (var i = 0; i < res.data.inspectClassWorkPlan.length; i++) {
                    inspectClassWorkMemberName[i] = res.data.inspectClassWorkPlan[i].realname
                    inspectClassWorkDoneNumber[i] = res.data.inspectClassWorkPlan[i].total
                    inspectClassWorkFinishedNumber[i] = res.data.inspectClassWorkPlan[i].finished
                }

                inspectClassWorkPlanArray = []
                res.data.inspectClassWorkPlan.forEach((item, index) => {
                    inspectClassWorkPlanArray.push({
                        id: index + 1,
                        item: item.item,
                        finished: item.finished,
                        nofinished: item.nofinished,
                        total: item.total,
                        percent: item.percent
                    })
                })

                this.setState({
                    inspectWorkCount: res.data.inspectWorkCount,
                    inspectClassWorkPlan: res.data.inspectClassWorkPlan,
                    inspectClassWorkPlanFirstName: inspectClassWorkPlanFirstName,
                    inspectClassWorkPlanFirstNumber: inspectClassWorkPlanFirstNumber,
                    inspectClassWorkPlanLastName: inspectClassWorkPlanLastName,
                    inspectClassWorkPlanLastNumber: inspectClassWorkPlanLastNumber,
                    inspectClassWorkMemberName: inspectClassWorkMemberName,
                    inspectClassWorkDoneNumber: inspectClassWorkDoneNumber,
                    inspectClassWorkFinishedNumber: inspectClassWorkFinishedNumber,
                    inspectClassWorkFirstNumber: inspectClassWorkFirstNumber,
                    inspectClassWorkLastNumber: inspectClassWorkLastNumber,
                    inspectWorkCountPlanNumber: inspectWorkCountPlanNumber,
                    inspectClassWorkPlanArray: inspectClassWorkPlanArray
                })

            })

        getAllInspectClassAndMemberApi(departmentId)
            .then((res) => {
                let inspectClassNumber
                let classMemberNumber
                inspectClassNumber = res.data.inspectClassNumber
                classMemberNumber = res.data.classMemberNumber
                this.setState({
                    inspectClassNumber: inspectClassNumber,
                    classMemberNumber: classMemberNumber,
                    loadding: false
                })
            });

        getInspectClassMemberAndNumberApi(departmentId, startTime, endTime)
            .then((res) => {
                this.setState({
                    inspectClassMemberAndNumber: res.data.inspectClassMemberAndNumber
                })
            })

        getInspectAddressAndClassMemberApi(departmentId, startTime, endTime)
            .then((res) => {
                inspectAddressAndClassMember = []
                res.data.inspectAddressAndClassMember.forEach((item, index) => {
                    inspectAddressAndClassMember.push({
                        id: index + 1,
                        address: item.address,
                        realName: item.realName
                    })
                })
                this.setState({
                    inspectAddressAndClassMember: inspectAddressAndClassMember
                })
            })

        getInspectClassWorkPlanRankApi(departmentId, startTime, endTime)
            .then((res) => {
                let inspectWorkCount = []
                inspectWorkCount = res.data.inspectWorkCount

                this.setState({
                    inspectWorkCount: inspectWorkCount
                })
            })

        getInspectCategoryAndItemApi(departmentId)
            .then((res) => {
                let inspectAdressCount
                this.setState({
                    inspectAdressCount: res.data.inspectCategoryAndItem.inspectAdressCount
                })
            })

        getInspectPercentCountApi(departmentId, startTime, endTime)
            .then((res) => {

                inspectClassName = []
                inspectClassPercent = []

                for (var i = 0; i < res.data.inspectPercentCount.length; i++) {
                    inspectClassName[i] = res.data.inspectPercentCount[i].item
                    inspectClassPercent[i] = parseInt(res.data.inspectPercentCount[i].percent)
                }
                this.setState({
                    inspectClassName: inspectClassName,
                    inspectClassPercent: inspectClassPercent
                })
            })

        // 3安全隐患->巡更报表统计->（1）总体情况1
        getAllHiddenDangerInfo(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                this.setState({
                    AllHiddenDangerNum: res.data.AllHiddenDangerNum,
                    HiddenDangerDealNum: res.data.HiddenDangerDealNum,
                    HiddenDangerDealRate: res.data.HiddenDangerDealRate
                })
            })
            .catch((e) => {
                console.info(e.config)
            });
        // 3安全隐患->巡更报表统计->（1）总体情况2->具体情况
        getClassHiddenDangeInfoByTime(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                console.log("getClassHiddenDangeInfoByTime", res.data)
                if (res.data.fail == 'fail') {
                    this.setState({
                        classReportMax: '',
                        classReportNumMax: 0,
                        classReportNumMaxRate: '',
                        hiddenDangerReportMonthMax: 0,
                        reportNumMaxUser: '',
                        reportNumMax: 0,
                        classHiddenDangerUserList: [],
                        classHiddenDangerCountList: []
                    })
                } else {
                    res.data.classUserHiddenDangerCountList.forEach((item, index) => {
                        classHiddenDangerUserList.push(item.realName)
                        classHiddenDangerCountList.push(item.times)
                    })
                    this.setState({
                        classReportMax: res.data.classReportMax,
                        classReportNumMax: res.data.classReportNumMax,
                        classReportNumMaxRate: res.data.classReportNumMaxRate,
                        hiddenDangerReportMonthMax: res.data.hiddenDangerReportMonthMax,
                        reportNumMaxUser: res.data.reportNumMaxUser,
                        reportNumMax: res.data.reportNumMax,
                        classHiddenDangerUserList: classHiddenDangerUserList,
                        classHiddenDangerCountList: classHiddenDangerCountList
                    })
                }
            })
            .catch((e) => {
                console.info(e.config)
            });
        // 3安全隐患->巡更报表统计->（2）安全隐患分布
        getHiddenDangerItemInfoByTime(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                hiddenDangerCategoryList = [];
                hiddenDangerPointList = [];
                if (res.data.fail == 'fail') {
                    this.setState({
                        hiddenDangerCategoryMax: '',
                        hiddenDangerCategoryNumMax: 0,
                        reportNumRate: '',
                        address: '',
                        hiddenDangerPointNumMax: 0,

                    })
                } else {
                    hiddenDangerCategoryRank = res.data.hiddenDangerCategoryRank
                    res.data.hiddenDangerCategoryRank.forEach((item, index) => {
                        hiddenDangerCategoryList.push({
                            value: item.times,
                            name: item.hiddenDangerCategory,
                        })

                    })
                    for (var i = 0; i < res.data.hiddenDangerPointCountRankList.length; i++) {
                        hiddenDangerPointList.push({
                            value: res.data.hiddenDangerPointCountRankList[i].times,
                            name: res.data.hiddenDangerPointCountRankList[i].address,
                        })

                    }
                    hiddenDangerPointCountRankList = hiddenDangerPointList
                    this.setState({
                        hiddenDangerCategoryRank: hiddenDangerCategoryRank,
                        hiddenDangerPointCountRankList: hiddenDangerPointCountRankList,
                        hiddenDangerCategoryMax: res.data.hiddenDangerCategoryMax,
                        hiddenDangerCategoryNumMax: res.data.hiddenDangerCategoryNumMax,
                        reportNumRate: res.data.reportNumRate,
                        address: res.data.address,
                        hiddenDangerPointNumMax: res.data.hiddenDangerPointNumMax,
                    })
                }
            })
            .catch((e) => {
                console.info(e.config)
            });

        //安全隐患->隐患详情
        getHiddenDangerItemDetailByTime(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                res.data.hiddenDangerDetailList.forEach((item, index) => {
                    if (item.status == 5) {
                        hiddenDangerDetailList.push({
                            key: index + 1,
                            address: item.address,
                            content: item.content,
                            status: '已处理',
                            realname: item.realname,
                            createTime: item.createTime
                        })
                    } else if (item.status == 6) {
                        hiddenDangerDetailList.push({
                            key: index + 1,
                            address: item.address,
                            content: item.content,
                            status: '未处理',
                            realname: item.realname,
                            createTime: item.createTime
                        })
                    } else {
                        hiddenDangerDetailList.push({
                            key: index + 1,
                            address: item.address,
                            content: item.content,
                            status: '未知',
                            realname: item.realname,
                            createTime: item.createTime
                        })
                    }

                })
                console.log("hiddenDangerDetailList", hiddenDangerDetailList)
                this.setState({
                    hiddenDangerDetailList: hiddenDangerDetailList
                })
            })
            .catch((e) => {
                console.info(e.config)
            })
    }

    render() {
        const tdStyle = {};
        const dangerTemplate = (
            this.state.AllHiddenDangerNum == 0 ? <div>该期间,我校未发现安全隐患事件</div> : <div>该期间,我校共发现安全隐患{this.state.AllHiddenDangerNum}件,已处理{this.state.HiddenDangerDealNum}个,处理率为{this.state.HiddenDangerDealRate + "%"}。{this.state.classReportMax}班组上报安全隐患最多,共上报了{this.state.classReportNumMax}件,占比{this.state.classReportNumMaxRate},
             其中,{this.state.reportNumMaxUser}共上报{this.state.reportNumMax}起隐患,是上报隐患最多的巡检员。</div>

        );
        const dangerCategoryTemplate = (
            this.state.hiddenDangerCategoryMax == 0 ? <div>该期间,我校未发现安全类别隐患</div> : <div>该期间,{this.state.hiddenDangerCategoryMax}大类安全隐患最多,共计{this.state.hiddenDangerCategoryNumMax}起,占比{this.state.reportNumRate},应特别注意相关方面的安全检查。
            此外,在{this.state.address}处发现的安全隐患最多,共计{this.state.hiddenDangerPointNumMax}起,因此该地点的安全状况应格外关注。</div>

        );

        const dangerTampalteToTitle = (
            this.state.AllHiddenDangerNum == 0 ? <span>未发现安全隐患事件</span> : <span>,累计发现并处理安全隐患{this.state.AllHiddenDangerNum}处。</span>
        )

        const dateTampalteToTitle = (
            this.state.defaultDate == true ? <span>{this.state.year}年从1月-12月期间</span> : <span>{this.state.startTime}至{this.state.endTime}期间</span>
        )
        return (
            <div style={{ width: '100%', height: '100%', backgroundColor: '#E8E8E8' }}>
                <div id="inspect-content" className="word">
                    <div className="timeSelect">
                        {
                            !this.state.loadding ?
                                <div className="buttoncss">
                                    {
                                        this.state.isExport == 0 ?
                                            <div><Button type="primary" onClick={this.exportword} style={{ marginLeft: 20 }}>word导出</Button></div>
                                            : null
                                    }
                                    <Button type="primary" onClick={this.back} style={{ marginLeft: 20 }}>返回</Button>
                                    <div className="infoTips">
                                        {
                                            this.state.isExport == 1 ?
                                                <div>正在导出巡检安全报表.....</div>
                                                : null
                                        }

                                    </div>
                                </div>
                                : null
                        }
                        <div className="progress">
                            {
                                this.state.isExport == 1 ?
                                    <div>
                                        <Spin tip="Loading..." size="large" spinning={this.state.loadding2}>
                                            <Alert
                                                message="巡检安全报告"
                                                description="导出过程受网速、统计间隔时间影响，请耐心等待....."
                                                type="info"
                                            />
                                        </Spin>,
                                    </div>
                                    : null
                            }
                        </div>
                    </div>
                    <div align="center">
                        <Spin size="large" spinning={this.state.loadding} />
                    </div>
                    <div className="title">
                        <div className="title-maxtitle">
                            <h2>校园安全巡检报告</h2>
                        </div>
                        <div className="title-summary">
                            为保证我校日常安全管理工作有序进行,{this.state.startTime}至{this.state.endTime}期间,我校共设定安全巡检班组{this.state.inspectClassNumber}组,开展日常巡检点{this.state.inspectAdressCount}个,共完成校园安全巡检{this.state.inspectWorkCount}次,累计发现并处理安全隐患{this.state.AllHiddenDangerNum}处。
                    </div>
                        <div className="title-middletitle">
                            <h3>1.安全巡检</h3>
                        </div>
                        <div className="title-middletitle">
                            <h3>1.1 安全巡检班组汇总</h3>
                        </div>
                        <div className="title-summary">
                            我校共有巡检班组{this.state.inspectClassNumber}组,参与老师{this.state.classMemberNumber}名,详情如下表：
                                    </div>
                    </div>

                    <div id="inspectTable1" className="table" >

                        <table className="WordSection1" border="1">
                            <colgroup>
                                <col width="33%" />
                                <col width="33%" />
                                <col width="33%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '200px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '592px' }}>成员名称</th>
                                    <th style={{ ...tdStyle, width: '200px' }}>巡检次数</th>


                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.inspectClassMemberAndNumber.map((item, index) => {
                                        return (
                                            <tr key={index}>
                                                <td>{item.serialNumber}</td>
                                                <td>{item.realname}</td>
                                                <td>{item.inspectNumber}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>

                    </div>
                    <div className="title-summary">
                        巡检点对应成员信息如下表：
                                </div>
                    <div id="inspectTable2" className="table" >

                        <table border="1" border-collapse="collapse" className="WordSection1">
                            <colgroup>
                                <col width="33%" />
                                <col width="33%" />
                                <col width="33%" />

                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '200px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '592px' }}>地点名称</th>
                                    <th style={{ ...tdStyle, width: '200px' }}>巡检成员</th>

                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.inspectAddressAndClassMember.map((item, index) => {
                                        return (
                                            <tr key={index}>
                                                <td>{index + 1}</td>
                                                <td>{item.address}</td>
                                                <td>{item.realName}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>

                    </div>
                    <div>
                        <EchartsDemo6 divId="s10" />
                        <div className="title">
                            <div className="title-mintitle">
                                <h3>1.3 安全巡检工作执行统计</h3>
                            </div>
                            <div className="title-summary">
                                该期间，校园安全巡检工作计划完成{this.state.inspectWorkCountPlanNumber}次，实际完成{this.state.inspectWorkCount}次；
                                        {this.state.inspectClassWorkPlanFirstName}任务计划最多，
                                        共计{this.state.inspectClassWorkPlanFirstNumber}次，实际完成{this.state.inspectClassWorkFirstNumber}次；
                                        {this.state.inspectClassWorkPlanLastName}任务计划最少，
                                        共计{this.state.inspectClassWorkPlanLastNumber}次，实际完成{this.state.inspectClassWorkLastNumber}次；所有巡检班组的计划数与完成数统计如下图：
                                </div>
                        </div>
                        <div>
                            <div>
                                <EchartsDemo7 divId="s11" />
                            </div>
                            <div className="title-summary">
                                巡检班组的计划数与实际完成数统计如下表：
                            </div>
                            <div id="inspectTable2" className="table" >

                                <table border="1" border-collapse="collapse" className="WordSection1">
                                    <colgroup>
                                        <col width="10%" />
                                        <col width="30%" />
                                        <col width="20%" />
                                        <col width="20%" />
                                        <col width="20%" />
                                    </colgroup>
                                    <thead>
                                        <tr>
                                            <th style={{ ...tdStyle, width: '150px' }}>序号</th>
                                            <th style={{ ...tdStyle, width: '250px' }}>巡检班组</th>
                                            <th style={{ ...tdStyle, width: '200px' }}>计划完成数</th>
                                            <th style={{ ...tdStyle, width: '200px' }}>实际完成数</th>
                                            <th style={{ ...tdStyle, width: '200px' }}>完成率</th>


                                        </tr>
                                    </thead>
                                    <tbody>
                                        {
                                            this.state.inspectClassWorkPlanArray.map((item, index) => {
                                                return (
                                                    <tr key={index}>
                                                        <td>{index + 1}</td>
                                                        <td>{item.item}</td>
                                                        <td>{item.total}</td>
                                                        <td>{item.finished}</td>
                                                        <td>{item.percent}</td>
                                                           {/* <td>{index + 1}</td>
                                                {/* <td>{item.address}</td>
                                                <td>{item.realName}</td> */} 
                                                    </tr>
                                                )
                                            })
                                        }
                                    </tbody>
                                </table>

                            </div>
                        </div>
                        <div className="title">
                            <div className="title-summary">
                                完成率是指班组巡检巡检次数与班组计划数的比值，我校各班组安全巡检按时完成率情况如下图:
                                </div>
                        </div>
                        <div>
                            <div>
                                <EchartsDemo8 divId="s12" startTime={this.state.startTime} endTime={this.state.endTime} />
                            </div>
                        </div>
                    </div>
                    <div className="title-summary">
                        {
                            this.state.AllHiddenDangerNum == 0 ? <span>{this.state.startTime}至{this.state.endTime}期间,我校未发生安全隐患事件。</span> :
                                <div className="dangerTitle">
                                    <div className="title">
                                        <div className="title-mintitle">
                                            <h3>2.安全隐患</h3>
                                        </div>
                                        <div className="title-mintitle">
                                            <h3>2.1 安全隐患统计</h3>
                                        </div>
                                        <div className="title-summary">
                                            {dangerTemplate}
                                        </div>
                                    </div>

                                    <div className="title-summary">
                                        总体安全隐患详情如下：
                </div>
                                    <div id="dangerDetail" className="table" >
                                        <table border="1" className="WordSection1">
                                            <colgroup>
                                                <col width="5%" />
                                                <col width="20%" />
                                                <col width="28%" />
                                                <col width="12%" />
                                                <col width="25%" />
                                                <col width="20%" />
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th style={{ ...tdStyle, width: '150px' }}>序号</th>
                                                    <th style={{ ...tdStyle, width: '200px' }}>隐患地点</th>
                                                    <th style={{ ...tdStyle, width: '200px' }}>详细问题</th>
                                                    <th style={{ ...tdStyle, width: '50px' }}>状态</th>
                                                    <th style={{ ...tdStyle, width: '192px' }}>时间</th>
                                                    <th style={{ ...tdStyle, width: '200px' }}>上报人</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {
                                                    this.state.hiddenDangerDetailList.map((item, index) => {
                                                        return (
                                                            <tr key={index}>
                                                                <td>{item.key}</td>
                                                                <td>{item.address}</td>
                                                                <td>{item.content}</td>
                                                                <td>{item.status}</td>
                                                                <td>{item.createTime}</td>
                                                                <td>{item.realname}</td>
                                                            </tr>
                                                        )
                                                    })
                                                }
                                            </tbody>
                                        </table>
                                    </div>

                                    <div className="title-summary">
                                        个人安全隐患上报次数的排名如下：
                 </div>
                                    <EchartsDemo3 classHiddenDangerUserList={this.state.classHiddenDangerUserList}
                                        classHiddenDangerCountList={this.state.classHiddenDangerCountList} />
                                    <div className="title">
                                        <div className="title-mintitle">
                                            <h3>2.2 安全隐患分布</h3>
                                        </div>
                                        <div className="title-summary">
                                            {dangerCategoryTemplate}
                                            {/* 该期间,{this.state.hiddenDangerCategoryMax}大类安全隐患最多,共计{this.state.hiddenDangerCategoryNumMax}起,占比{this.state.reportNumRate},应特别注意相关方面的安全检查。
                                此外,在{this.state.address}处发现的安全隐患最多,共计{this.state.hiddenDangerPointNumMax}起，因此该地点的安全状况应格外关注。 */}
                                        </div>
                                    </div>
                                    <div className="title-summary">
                                        安全隐患类别分布情况如下：
                                </div>
                                    <div id="patrolTable2" className="table" >

                                        <table className="WordSection1" border="1">
                                            <colgroup>
                                                <col width="25%" />
                                                <col width="25%" />
                                                <col width="25%" />
                                                <col width="25%" />
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th style={{ ...tdStyle, width: '150px' }}>序号</th>
                                                    <th style={{ ...tdStyle, width: '542px' }}>安全隐患类别</th>
                                                    <th style={{ ...tdStyle, width: '150px' }}>隐患数量</th>
                                                    <th style={{ ...tdStyle, width: '150px' }}>占比</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {
                                                    this.state.hiddenDangerCategoryRank.map((item, index) => {
                                                        return (
                                                            <tr key={index}>
                                                                <td>{index + 1}</td>
                                                                <td>{item.hiddenDangerCategory}</td>
                                                                <td>{item.times}</td>
                                                                <td>{item.reportNumRate}</td>
                                                            </tr>
                                                        )
                                                    })
                                                }
                                            </tbody>
                                        </table>

                                    </div>
                                    <div className="title-summary">
                                        安全隐患类别分布图如下：
                                    </div>
                                    <div id="pie1">
                                        <EchartsDemo4 divId="s4" />
                                    </div>
                                    <div className="title-summary">
                                        安全隐患发生地点分布情况如下:
                                    </div>
                                    <div id="patrolTable3" className="table" >
                                        <table border="1" className="WordSection1">
                                            <colgroup>
                                                <col width="33%" />
                                                <col width="33%" />
                                                <col width="33%" />

                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th style={{ ...tdStyle, width: '200px' }}>序号</th>
                                                    <th style={{ ...tdStyle, width: '592px' }}>安全隐患地点</th>
                                                    <th style={{ ...tdStyle, width: '200px' }}>隐患数量</th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                {
                                                    this.state.hiddenDangerPointCountRankList.map((item, index) => {
                                                        return (
                                                            <tr key={index}>
                                                                <td>{index + 1}</td>
                                                                <td>{item.name}</td>
                                                                <td>{item.value}</td>
                                                            </tr>
                                                        )
                                                    })
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                    <div className="title-summary">
                                        安全隐患发生地点分布图如下：
                                    </div>
                                    <div id="pie2">
                                        <EchartsDemo5 />
                                    </div>
                                </div>
                        }
                    </div>
                </div>
            </div>
        )
    }
}


//巡更组件
class PatrolComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            src: "http://47.111.158.147:8080/fileImage/123002_1607328079415.jpg",
            showimg: false,
            loadding: true,
            loadding2: false,
            percent: 0,
            isExport: 0,
            // timer: 0,
            // timer2: 5,
            startTime: startTime,
            endTime: endTime,
            defaultDate: true,
            inspectClassMemberAndNumber: [],
            inspectAddressAndClassMember: [],
            classAndUserInfo: [],
            UserAccuracyRate: [],
            hiddenDangerCategoryRank: [],
            hiddenDangerPointCountRankList: [],
            hiddenDangerDetailList: [],
            selectCheckbox: [],
            checkedValues: [],
            inspectDisplay: true,
            patrolDisplay: true,
            allDisplay: true,
            inspectSelect: false,
            patrolSelect: false,
            inspectChecked: false,
            patrolChecked: false,
        }
    }

    componentWillMount() {
        console.log('componentWillMount将要渲染')
        if (this.props.location.state.startTime != undefined && this.props.location.state.startTime !== null &&
            this.props.location.state.endTime != undefined && this.props.location.state.endTime !== null) {
            sessionStorage.setItem("startTime", this.props.location.state.startTime);
            sessionStorage.setItem("endTime", this.props.location.state.endTime);
        }
        console.log("startTime", sessionStorage.getItem("startTime"))
        this.setState({
            startTime: sessionStorage.getItem("startTime"),
            endTime: sessionStorage.getItem('endTime')
        })
    }

    componentDidMount() {
        this.refreshdata();
    }

    refreshdata() {
        let departmentId = sessionStorage.getItem("departmentId")
        //传入时间测试使用
        let startTime = this.state.startTime
        let endTime = this.state.endTime
        //2.1安全巡更班组->巡更报表统计->获取学校的所有巡更班组以及对应班组成员信息、每人巡更总次数并排序
        let hiddenDangerPointCountRankList = []
        let hiddenDangerCategoryRank = [];
        let classAndUserInfo = [];
        let invalidPatrolUserRank = [];
        let invalidPatrolTimesRank = [];
        let accuracyRateUserList = [];
        let accuracyRateList = [];
        let classHiddenDangerUserList = [];
        let classHiddenDangerCountList = [];
        let UserAccuracyRate = [];
        let hiddenDangerDetailList = [];
        hiddenDangerCategoryList = [];
        hiddenDangerPointList = [];
        getAllPatrolClassAndUserInfoPerSchool(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                res.data.classAndUserInfo.forEach((item, index) => {
                    res.data.classAndUserInfo[index].userInfo.forEach((item2, index2) => {
                        console.log("item2", item2)
                        if (JSON.stringify(item2) != '{}') {
                            classAndUserInfo.push({
                                id: index2 + 1,
                                username: item2.username,
                                times: item2.symbolCount,
                                patrolClass: item.name
                            });
                        }
                    });
                });
                // console.log("classAndUserInfo", classAndUserInfo)
                this.setState({
                    classAndUserInfo: classAndUserInfo,
                    potrolClassNum: res.data.classInfo.potrolClassNum,
                    memberNum: res.data.classInfo.memberNum
                })
            })
            .catch((e) => {
                console.info(e.config)
            });
        // 2.2安全巡更情况->巡更报表统计->获取学校的所有巡更班组对应成员信息、每人巡更总次数并排序(通过时间)
        getPatrolCountAndMemberRankPerSchoolByTime(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                res.data.InvalidPatrolMemberRankByTime.forEach((item, index) => {
                    invalidPatrolUserRank.push(item.username)
                    invalidPatrolTimesRank.push(item.symbolCount)
                });
                this.setState({
                    patrolrouteNum: res.data.patrolrouteNum,
                    daypatrolplanNum: res.data.daypatrolplanNum,
                    patrolCountByTime: res.data.patrolCountByTime,
                    MaxPatrolCountUser: res.data.MaxPatrolCountUser,
                    MaxPatrolCount: res.data.MaxPatrolCount,
                    MinPatrolCountUser: res.data.MinPatrolCountUser,
                    MinPatrolCount: res.data.MinPatrolCount,
                    invalidPatrolUserRank: invalidPatrolUserRank,
                    invalidPatrolTimesRank: invalidPatrolTimesRank,
                    loadding: false
                })
            })
            .catch((e) => {
                console.info(e.config)
            });
        // 2.2安全巡更情况->巡更报表统计->（2）安全巡更按时巡更班组完成率
        getPatrolClassCompletionPerSchoolByTime(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                this.setState({
                    patrolClassCompletionNum: res.data.patrolClassCompletionNum,
                    patrolClassTotalNum: res.data.patrolClassTotalNum,
                    CompletionRate: res.data.CompletionRate
                })
            })
            .catch((e) => {
                console.info(e.config)
            });
        // 2.2安全巡更情况->巡更报表统计->（2）安全巡更按时巡更班组个人准确率
        getPatrolClassUserAccuracyPerSchoolByTime(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                UserAccuracyRate = res.data.UserAccuracyRate;
                res.data.UserAccuracyRate.forEach((item, index) => {
                    accuracyRateUserList.push(item.realName)
                    accuracyRateList.push(item.AccuracyRate)
                })
                this.setState({
                    UserAccuracyRate: UserAccuracyRate,
                    accuracyRateUserList: accuracyRateUserList,
                    accuracyRateList: accuracyRateList
                })
            })
            .catch((e) => {
                console.info(e.config)
            });
        // 3安全隐患->巡更报表统计->（1）总体情况1
        getAllHiddenDangerInfo(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                this.setState({
                    AllHiddenDangerNum: res.data.AllHiddenDangerNum,
                    HiddenDangerDealNum: res.data.HiddenDangerDealNum,
                    HiddenDangerDealRate: res.data.HiddenDangerDealRate
                })
            })
            .catch((e) => {
                console.info(e.config)
            });
        // 3安全隐患->巡更报表统计->（1）总体情况2->具体情况
        getClassHiddenDangeInfoByTime(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                console.log("getClassHiddenDangeInfoByTime", res.data)
                if (res.data.fail == 'fail') {
                    this.setState({
                        classReportMax: '',
                        classReportNumMax: 0,
                        classReportNumMaxRate: '',
                        hiddenDangerReportMonthMax: 0,
                        reportNumMaxUser: '',
                        reportNumMax: 0,
                        classHiddenDangerUserList: [],
                        classHiddenDangerCountList: []
                    })
                } else {
                    res.data.classUserHiddenDangerCountList.forEach((item, index) => {
                        classHiddenDangerUserList.push(item.realName)
                        classHiddenDangerCountList.push(item.times)
                    })
                    this.setState({
                        classReportMax: res.data.classReportMax,
                        classReportNumMax: res.data.classReportNumMax,
                        classReportNumMaxRate: res.data.classReportNumMaxRate,
                        hiddenDangerReportMonthMax: res.data.hiddenDangerReportMonthMax,
                        reportNumMaxUser: res.data.reportNumMaxUser,
                        reportNumMax: res.data.reportNumMax,
                        classHiddenDangerUserList: classHiddenDangerUserList,
                        classHiddenDangerCountList: classHiddenDangerCountList
                    })
                }
            })
            .catch((e) => {
                console.info(e.config)
            });
        // 3安全隐患->巡更报表统计->（2）安全隐患分布
        getHiddenDangerItemInfoByTime(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                hiddenDangerCategoryList = [];
                hiddenDangerPointList = [];
                if (res.data.fail == 'fail') {
                    this.setState({
                        hiddenDangerCategoryMax: '',
                        hiddenDangerCategoryNumMax: 0,
                        reportNumRate: '',
                        address: '',
                        hiddenDangerPointNumMax: 0,

                    })
                } else {
                    hiddenDangerCategoryRank = res.data.hiddenDangerCategoryRank
                    res.data.hiddenDangerCategoryRank.forEach((item, index) => {
                        hiddenDangerCategoryList.push({
                            value: item.times,
                            name: item.hiddenDangerCategory,
                        })

                    })
                    for (var i = 0; i < res.data.hiddenDangerPointCountRankList.length; i++) {
                        hiddenDangerPointList.push({
                            value: res.data.hiddenDangerPointCountRankList[i].times,
                            name: res.data.hiddenDangerPointCountRankList[i].address,
                        })

                    }
                    hiddenDangerPointCountRankList = hiddenDangerPointList
                    this.setState({
                        hiddenDangerCategoryRank: hiddenDangerCategoryRank,
                        hiddenDangerPointCountRankList: hiddenDangerPointCountRankList,
                        hiddenDangerCategoryMax: res.data.hiddenDangerCategoryMax,
                        hiddenDangerCategoryNumMax: res.data.hiddenDangerCategoryNumMax,
                        reportNumRate: res.data.reportNumRate,
                        address: res.data.address,
                        hiddenDangerPointNumMax: res.data.hiddenDangerPointNumMax,
                    })
                }
            })
            .catch((e) => {
                console.info(e.config)
            });

        //安全隐患->隐患详情
        getHiddenDangerItemDetailByTime(parseInt(sessionStorage.getItem("departmentId")), startTime, endTime)
            .then((res) => {
                res.data.hiddenDangerDetailList.forEach((item, index) => {
                    if (item.status == 5) {
                        hiddenDangerDetailList.push({
                            key: index + 1,
                            address: item.address,
                            content: item.content,
                            status: '已处理',
                            realname: item.realname,
                            createTime: item.createTime
                        })
                    } else if (item.status == 6) {
                        hiddenDangerDetailList.push({
                            key: index + 1,
                            address: item.address,
                            content: item.content,
                            status: '未处理',
                            realname: item.realname,
                            createTime: item.createTime
                        })
                    } else {
                        hiddenDangerDetailList.push({
                            key: index + 1,
                            address: item.address,
                            content: item.content,
                            status: '未知',
                            realname: item.realname,
                            createTime: item.createTime
                        })
                    }

                })
                console.log("hiddenDangerDetailList", hiddenDangerDetailList)
                this.setState({
                    hiddenDangerDetailList: hiddenDangerDetailList
                })
            })
            .catch((e) => {
                console.info(e.config)
            })

    }
    exportword = () => {
        imageBase64List = []
        let departmentId = sessionStorage.getItem("departmentId")
        if (imgarray4[0] != undefined && imgarray4[0] != null) {
            imageBase64List.push(imgarray4[0])
        } else {
            imageBase64List.push("")
        }
        if (imgarray5[0] != undefined && imgarray5[0] != null) {
            imageBase64List.push(imgarray5[0])
        } else {
            imageBase64List.push("")
        }
        if (imgarray6[0] != undefined && imgarray6[0] != null) {
            imageBase64List.push(imgarray6[0])
        } else {
            imageBase64List.push("")
        }
        if (imgarray7[0] != undefined && imgarray7[0] != null) {
            imageBase64List.push(imgarray7[0])
        } else {
            imageBase64List.push("")
        }
        if (imgarray8[0] != undefined && imgarray8[0] != null) {
            imageBase64List.push(imgarray8[0])
        } else {
            imageBase64List.push("")
        }
        exportPatrolWord(JSON.stringify(imageBase64List), this.state.startTime, this.state.endTime, departmentId)
            .then((res) => {
                //下载文件
                const fileType = 1
                downloadWord(fileType).then((res) => {
                    console.log("res", res)
                    const url = window.URL.createObjectURL(new Blob([res.data],
                        // 设置该文件的mime类型，这里对应的mime类型对应为.xlsx格式
                        { type: 'application/msword' }));
                    const link = document.createElement('a');
                    link.href = url;
                    // 从header中获取服务端命名的文件名
                    const fileName = decodeURIComponent(res.headers['filename']);
                    link.setAttribute('download', fileName);
                    document.body.appendChild(link);
                    link.click();
                    message.success('已成功下载到本地！', 8)
                    this.setState({
                        isExport: 0,
                        loadding2: false
                    })
                })
            })
        this.setState({
            isExport: 1,
            loadding2: true
        })
    }
    back = () => {
        window.history.back();
        this.setState({
            isExport: 0,
            isSelectTime: 0
        })
    }

    render() {

        const tdStyle = { padding: '10px 0', whiteSpace: 'nowrap', width: '300px' };
        const patrolheadTitle = (
            this.state.patrolSelect == true ? <span>,安全巡更班组{this.state.potrolClassNum}组,共完成校园安全巡更{this.state.patrolCountByTime}次</span> : ''
        )


        const dangerTemplate = (
            this.state.AllHiddenDangerNum == 0 ? <div>该期间,我校未发现安全隐患事件</div> : <div>该期间,我校共发现安全隐患{this.state.AllHiddenDangerNum}件,已处理{this.state.HiddenDangerDealNum}个,处理率为{this.state.HiddenDangerDealRate + "%"}。{this.state.classReportMax}班组上报安全隐患最多,共上报了{this.state.classReportNumMax}件,占比{this.state.classReportNumMaxRate},
             其中,{this.state.reportNumMaxUser}共上报{this.state.reportNumMax}起隐患,是上报隐患最多的巡检员</div>

        );
        const dangerCategoryTemplate = (
            this.state.hiddenDangerCategoryMax == 0 ? <div>该期间,我校未发现安全类别隐患</div> : <div>该期间,{this.state.hiddenDangerCategoryMax}大类安全隐患最多,共计{this.state.hiddenDangerCategoryNumMax}起,占比{this.state.reportNumRate},应特别注意相关方面的安全检查。
            此外,在{this.state.address}处发现的安全隐患最多,共计{this.state.hiddenDangerPointNumMax}起,因此该地点的安全状况应格外关注。</div>

        );

        const dangerTampalteToTitle = (
            this.state.AllHiddenDangerNum == 0 ? <span>未发现安全隐患事件</span> : <span>,累计发现并处理安全隐患{this.state.AllHiddenDangerNum}处。</span>
        )

        const dateTampalteToTitle = (
            this.state.defaultDate == true ? <span>{this.state.year}年从1月-12月期间</span> : <span>{this.state.startTime}至{this.state.endTime}期间</span>
        )

        return (
            <div style={{ width: '100%', height: '100%', backgroundColor: '#E8E8E8' }}>
                <div id="patrol-content" className="word">
                    <div className="timeSelect">
                        {
                            !this.state.loadding ?
                                <div className="buttoncss">
                                    {
                                        this.state.isExport == 0 ?
                                            <div><Button type="primary" onClick={this.exportword} style={{ marginLeft: 20 }}>word导出</Button></div>
                                            : null
                                    }
                                    <Button type="primary" onClick={this.back} style={{ marginLeft: 20 }}>返回</Button>
                                    <div className="infoTips">
                                        {
                                            this.state.isExport == 1 ?
                                                <div>正在导出巡更安全报表.....</div>
                                                : null
                                        }

                                    </div>
                                </div>
                                : null
                        }
                        <div className="progress">
                            {
                                this.state.isExport == 1 ?
                                    <div>
                                        <Spin tip="Loading..." size="large" spinning={this.state.loadding2}>
                                            <Alert
                                                message="巡更安全报告"
                                                description="导出过程受网速、统计间隔时间影响，请耐心等待....."
                                                type="info"
                                            />
                                        </Spin>,
                                    </div>
                                    : null
                            }
                        </div>
                    </div>
                    <div align="center">
                        <Spin size="large" spinning={this.state.loadding} />
                    </div>
                    <div className="title">
                        <div className="title-maxtitle">
                            <h2>校园安全巡更报告</h2>
                        </div>
                        <div className="title-summary">
                            为保证我校日常安全管理工作有序进行,{this.state.startTime}至{this.state.endTime}期间,安全巡更班组{this.state.potrolClassNum}组,共完成校园安全巡更{this.state.patrolCountByTime}次,累计发现并处理安全隐患{this.state.AllHiddenDangerNum}处。
                    </div>
                        <div className="title-middletitle">
                            <h3>1.安全巡更</h3>
                        </div>
                        <div className="title-middletitle">
                            <h3>1.1 安全巡更班组统计</h3>
                        </div>
                        <div className="title-summary">
                            我校共有巡更班组{this.state.potrolClassNum}组，参与安保人员{this.state.memberNum}名。巡更班组成员见下表：
                    </div>
                    </div>
                    <div id="patrolTable1" className="table" >
                        <table border="1" className="WordSection1">
                            <colgroup>
                                <col width="25%" />
                                <col width="25%" />
                                <col width="25%" />
                                <col width="25%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '150px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '150px' }}>巡更员姓名</th>
                                    <th style={{ ...tdStyle, width: '542px' }}>巡更班组</th>
                                    <th style={{ ...tdStyle, width: '150px' }}>巡更次数</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.classAndUserInfo.map((item, index) => {
                                        return (
                                            <tr key={index}>
                                                <td>{index + 1}</td>
                                                <td>{item.username}</td>
                                                <td>{item.patrolClass}</td>
                                                <td>{item.times}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                    <div className="title">
                        <div className="title-mintitle">
                            <h3>1.2 安全巡更统计</h3>
                        </div>
                        <div className="title-summary">
                            此期间，我校配置巡更点{this.state.patrolrouteNum}个,每天巡更<span className="loadData">{this.state.daypatrolplanNum}</span>次,
                                    共完成安全巡更<span className="loadData">{this.state.patrolCountByTime}</span>次,
                                    其中{this.state.MaxPatrolCountUser}巡更次数最多,总计<span className="loadData">{this.state.MaxPatrolCount}</span>次,
                                    <span className="loadData">{this.state.MinPatrolCountUser}</span>次数最少,总计<span className="loadData">{this.state.MinPatrolCount}</span>次。个人巡更次数的排名如下：
                                    </div>
                    </div>

                    <EchartsDemo invalidPatrolTimesRank={this.state.invalidPatrolTimesRank}
                        invalidPatrolUserRank={this.state.invalidPatrolUserRank} />


                    <div className="title">
                        <div className="title-mintitle">
                            <h3>1.3 安全巡更班组完成率、个人准确率统计</h3>
                        </div>
                        <div className="title-summary">
                            此期间，我校巡更计划总次数为<span className="loadData">{this.state.patrolClassTotalNum}</span>次,
                            巡更班组实际完成次数为<span className="loadData">{this.state.patrolClassCompletionNum}</span>次,
                                总体完成率为<span className="loadData">{this.state.CompletionRate}</span>。成员个人准确率情况如下图：
                                </div>
                    </div>
                    <EchartsDemo2 accuracyRateList={this.state.accuracyRateList}
                        accuracyRateUserList={this.state.accuracyRateUserList} />

                    <div className="title-summary">
                        {
                            this.state.AllHiddenDangerNum == 0 ? <span>{this.state.startTime}至{this.state.endTime}期间,我校未发生安全隐患事件。</span> :
                                <div className="dangerTitle">
                                    <div className="title">
                                        <div className="title-mintitle">
                                            <h3>2.安全隐患</h3>
                                        </div>
                                        <div className="title-mintitle">
                                            <h3>2.1 安全隐患统计</h3>
                                        </div>
                                        <div className="title-summary">
                                            {dangerTemplate}
                                        </div>
                                    </div>

                                    <div className="title-summary">
                                        总体安全隐患详情如下：
                </div>
                                    <div id="dangerDetail" className="table" >
                                        <table border="1" className="WordSection1">
                                            <colgroup>
                                                <col width="5%" />
                                                <col width="20%" />
                                                <col width="28%" />
                                                <col width="12%" />
                                                <col width="25%" />
                                                <col width="20%" />
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th style={{ ...tdStyle, width: '150px' }}>序号</th>
                                                    <th style={{ ...tdStyle, width: '200px' }}>隐患地点</th>
                                                    <th style={{ ...tdStyle, width: '200px' }}>详细问题</th>
                                                    <th style={{ ...tdStyle, width: '50px' }}>状态</th>
                                                    <th style={{ ...tdStyle, width: '192px' }}>时间</th>
                                                    <th style={{ ...tdStyle, width: '200px' }}>上报人</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {
                                                    this.state.hiddenDangerDetailList.map((item, index) => {
                                                        return (
                                                            <tr key={index}>
                                                                <td>{item.key}</td>
                                                                <td>{item.address}</td>
                                                                <td>{item.content}</td>
                                                                <td>{item.status}</td>
                                                                <td>{item.createTime}</td>
                                                                <td>{item.realname}</td>
                                                            </tr>
                                                        )
                                                    })
                                                }
                                            </tbody>
                                        </table>
                                    </div>

                                    <div className="title-summary">
                                        个人安全隐患上报次数的排名如下：
                 </div>
                                    <EchartsDemo3 classHiddenDangerUserList={this.state.classHiddenDangerUserList}
                                        classHiddenDangerCountList={this.state.classHiddenDangerCountList} />
                                    <div className="title">
                                        <div className="title-mintitle">
                                            <h3>2.2 安全隐患分布</h3>
                                        </div>
                                        <div className="title-summary">
                                            {dangerCategoryTemplate}
                                            {/* 该期间,{this.state.hiddenDangerCategoryMax}大类安全隐患最多,共计{this.state.hiddenDangerCategoryNumMax}起,占比{this.state.reportNumRate},应特别注意相关方面的安全检查。
                                此外,在{this.state.address}处发现的安全隐患最多,共计{this.state.hiddenDangerPointNumMax}起，因此该地点的安全状况应格外关注。 */}
                                        </div>
                                    </div>
                                    <div className="title-summary">
                                        安全隐患类别分布情况如下：
                                </div>
                                    <div id="patrolTable2" className="table" >

                                        <table className="WordSection1" border="1">
                                            <colgroup>
                                                <col width="25%" />
                                                <col width="25%" />
                                                <col width="25%" />
                                                <col width="25%" />
                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th style={{ ...tdStyle, width: '150px' }}>序号</th>
                                                    <th style={{ ...tdStyle, width: '542px' }}>安全隐患类别</th>
                                                    <th style={{ ...tdStyle, width: '150px' }}>隐患数量</th>
                                                    <th style={{ ...tdStyle, width: '150px' }}>占比</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                {
                                                    this.state.hiddenDangerCategoryRank.map((item, index) => {
                                                        return (
                                                            <tr key={index}>
                                                                <td>{index + 1}</td>
                                                                <td>{item.hiddenDangerCategory}</td>
                                                                <td>{item.times}</td>
                                                                <td>{item.reportNumRate}</td>
                                                            </tr>
                                                        )
                                                    })
                                                }
                                            </tbody>
                                        </table>

                                    </div>
                                    <div className="title-summary">
                                        安全隐患类别分布图如下：
                                    </div>
                                    <div id="pie1">
                                        <EchartsDemo4 divId="s4" />
                                    </div>
                                    <div className="title-summary">
                                        安全隐患发生地点分布统计如下表:
                                    </div>
                                    <div id="patrolTable3" className="table" >
                                        <table border="1" className="WordSection1">
                                            <colgroup>
                                                <col width="33%" />
                                                <col width="33%" />
                                                <col width="33%" />

                                            </colgroup>
                                            <thead>
                                                <tr>
                                                    <th style={{ ...tdStyle, width: '200px' }}>序号</th>
                                                    <th style={{ ...tdStyle, width: '592px' }}>安全隐患地点</th>
                                                    <th style={{ ...tdStyle, width: '200px' }}>隐患数量</th>

                                                </tr>
                                            </thead>
                                            <tbody>
                                                {
                                                    this.state.hiddenDangerPointCountRankList.map((item, index) => {
                                                        return (
                                                            <tr key={index}>
                                                                <td>{index + 1}</td>
                                                                <td>{item.name}</td>
                                                                <td>{item.value}</td>
                                                            </tr>
                                                        )
                                                    })
                                                }
                                            </tbody>
                                        </table>
                                    </div>
                                    <div className="title-summary">
                                        安全隐患类别分布图如下：
                                    </div>
                                    <div id="pie2">
                                        <EchartsDemo5 />
                                    </div>
                                </div>
                        }
                    </div>
                </div>
            </div>

        )
    }
}

//值周组件
class DutyWeekComponent extends Component {
    constructor(props) {
        super(props)
        this.state = {
            loadding: true,
            loadding2: false,
            isExport: 0,
            startTime: startTime,
            endTime: endTime,
            dutyWeekCheckPointInfoList: [],
            dutyWeekContentAndItemList: [],
            dutyWeekCheckNumRankList: [],
            dutyWeekDeductionRankList: [],
            questionAndPersonnelRankList: [],
            addressAndQuestionRankList: [],
            questionItemRankList:[]
        }
    }

    componentWillMount() {
        console.log('componentWillMount将要渲染')
        if (this.props.location.state.startTime != undefined && this.props.location.state.startTime !== null &&
            this.props.location.state.endTime != undefined && this.props.location.state.endTime !== null) {
            sessionStorage.setItem("startTime", this.props.location.state.startTime);
            sessionStorage.setItem("endTime", this.props.location.state.endTime);
        }
        console.log("startTime", sessionStorage.getItem("startTime"))
        this.setState({
            startTime: sessionStorage.getItem("startTime"),
            endTime: sessionStorage.getItem('endTime')
        })
    }

    componentDidMount() {
        this.refreshdata();
    }

    //接口API
    refreshdata() {
        let departmentId = sessionStorage.getItem("departmentId");
        let startTime = this.state.startTime
        let endTime = this.state.endTime
        //标题---总体情况统计-我校参与值周教师为xxx位，值周巡查地点共计xxx处，累计巡查次数为xxx次，累计巡查问题上报数为xxx个。
        getDutyWeekAllInfoByTime(departmentId, startTime, endTime)
            .then((res) => {
                if (res.data.dutyWeekAllInfoList != null) {
                    let categoryNum = res.data.dutyWeekAllInfoList[0].categoryNum
                    let checkpointNum = res.data.dutyWeekAllInfoList[0].checkpointNum
                    let itemNum = res.data.dutyWeekAllInfoList[0].itemNum
                    let questionNum = res.data.dutyWeekAllInfoList[0].questionNum
                    let realDutyWeekNum = res.data.dutyWeekAllInfoList[0].realDutyWeekNum
                    let teacherNum = res.data.dutyWeekAllInfoList[0].teacherNum
                    this.setState({
                        categoryNum: categoryNum,
                        checkpointNum: checkpointNum,
                        teacherNum: teacherNum,
                        itemNum: itemNum,
                        questionNum: questionNum,
                        realDutyWeekNum: realDutyWeekNum,
                        loadding:false
                    })
                }
            })
            .catch((e) => {
                console.info(e.config)
            });

        //值周检查点与值周任务汇总---值周检查点与值周地址关联信息获取
        let dutyWeekCheckPointInfoList = []
        getDutyWeekCheckPointInfo(departmentId)
            .then((res) => {
                dutyWeekCheckPointInfoList = res.data.dutyWeekCheckPointInfoList
                this.setState({
                    dutyWeekCheckPointInfoList: dutyWeekCheckPointInfoList
                })
            })
            .catch((e) => {
                console.info(e.config)
            });

        //值周检查点与值周任务汇总---值周任务与值周项关联
        let dutyWeekContentAndItemList = []
        getDutyWeekContentAndItem(departmentId)
            .then((res) => {
                dutyWeekContentAndItemList = res.data.dutyWeekContentAndItemList
                this.setState({
                    dutyWeekContentAndItemList: dutyWeekContentAndItemList
                })
            })
            .catch((e) => {
                console.info(e.config)
            });

        //值周教师与值周巡查次数统计--我校参与值周教师共有xxx位，其中xxx上报的最多，为xxx次。xxx上报的最少，为xxx次
        let dutyWeekCheckNumRankList = []
        getDutyWeekCheckNumRankByTime(departmentId, startTime, endTime)
            .then((res) => {
                console.log(res.data)
                let realnameMax = res.data.realnameMax
                let realnameMin = res.data.realnameMin
                let checkNumsMax = res.data.checkNumsMax
                let checkNumsMin = res.data.checkNumsMin
                dutyWeekCheckNumRankList = res.data.dutyWeekCheckNumRankList
                this.setState({
                    checkNumsMin: checkNumsMin,
                    realnameMax: realnameMax,
                    realnameMin: realnameMin,
                    checkNumsMax: checkNumsMax,
                    dutyWeekCheckNumRankList: dutyWeekCheckNumRankList
                })
            })
            .catch((e) => {
                console.info(e.config)
            });

        //值周巡查问题扣分统计
        let dutyWeekDeductionRankList = []
        getDutyWeekDeductionRankByTime(departmentId, startTime, endTime)
            .then((res) => {
                dutyWeekDeductionRankList = res.data.dutyWeekDeductionRankList
                this.setState({
                    dutyWeekDeductionRankList: dutyWeekDeductionRankList
                })
            })
            .catch((e) => {
                console.info(e.config)
            });

        //此期间，我校xxx位值周教师共上报xxx个问题，xxx发现的问题最多，共计xxx次，xxx发现的问题最少，为xxx次。
        //其中在xxx处发现的问题最多，共计xxx个。在xxx发现的问题最少，为xxx个。 
        //发现问题最多的值周项是xxx，共计xxx次，发现问题最少的值周项是xxx，为xxx次。
        getAllPersonnelAndQuestion(departmentId, startTime, endTime)
            .then((res) => {
                console.log("res.data=======================", res.data)
                let alluserNumber = res.data.alluserNumber
                let questionNumber = res.data.questionNumber
                this.setState({
                    alluserNumber: alluserNumber,
                    questionNumber: questionNumber
                })
            })
        
        //xxx发现的问题最多，共计xxx次，xxx发现的问题最少，为xxx次。
        getQuestionAndPersonnelRank(departmentId, startTime, endTime)
            .then((res) => {
                let realNameMax = res.data.realNameMax
                let realNameMin = res.data.realNameMin
                let questionNumberMax = res.data.questionNumberMax
                let questionNumberMin = res.data.questionNumberMin
                let questionAndPersonnelRankList = res.data.questionAndPersonnelRankList
                this.setState({
                    realNameMax: realNameMax,
                    realNameMin: realNameMin,
                    questionNumberMax: questionNumberMax,
                    questionNumberMin: questionNumberMin,
                    questionAndPersonnelRankList: questionAndPersonnelRankList
                })
            })

        //其中在xxx处发现的问题最多，共计xxx个。在xxx发现的问题最少，为xxx个。
        getAddressAndQuestionRank(departmentId, startTime, endTime)
            .then((res) => {
                let classMax = res.data.classMax
                let classMin = res.data.classMin
                let questionAddressNumberMax = res.data.questionAddressNumberMax
                let questionAddressNumberMin = res.data.questionAddressNumberMin
                let addressAndQuestionRankList = res.data.addressAndQuestionRankList

                this.setState({
                    classMax: classMax,
                    classMin: classMin,
                    questionAddressNumberMax: questionAddressNumberMax,
                    questionAddressNumberMin: questionAddressNumberMin,
                    addressAndQuestionRankList: addressAndQuestionRankList
                })
            })

        //发现问题最多的巡查项是xxx，共计xxx次，最少的巡查项是xxx，为xxx次
        getQuestionItemRank(departmentId, startTime, endTime)
            .then((res) => {
                let itemMax = res.data.itemMax
                let itemMin = res.data.itemMin
                let questionItemNumberMax = res.data.questionItemNumberMax
                let questionItemNumberMin = res.data.questionItemNumberMin
                let questionItemRankList = res.data.questionItemRankList

                this.setState({
                    itemMax: itemMax,
                    itemMin: itemMin,
                    questionItemNumberMax: questionItemNumberMax,
                    questionItemNumberMin: questionItemNumberMin,
                    questionItemRankList: questionItemRankList
                })

            })
    }
    exportword = () => {
        let departmentId = sessionStorage.getItem("departmentId")
        exportDutyWeekWord(this.state.startTime, this.state.endTime, departmentId)
            .then((res) => {
                //下载文件
                const fileType = 3
                downloadWord(fileType).then((res) => {
                    console.log("res", res)
                    const url = window.URL.createObjectURL(new Blob([res.data],
                        // 设置该文件的mime类型，这里对应的mime类型对应为.xlsx格式
                        { type: 'application/msword' }));
                    const link = document.createElement('a');
                    link.href = url;
                    // 从header中获取服务端命名的文件名
                    const fileName = decodeURIComponent(res.headers['filename']);
                    link.setAttribute('download', fileName);
                    document.body.appendChild(link);
                    link.click();
                    message.success('已成功下载到本地！', 8)
                    this.setState({
                        isExport: 0,
                        loadding2: false
                    })
                })
            })
        this.setState({
            isExport: 1,
            loadding2: true
        })
    }

    back = () => {
        window.history.back();
        this.setState({
            isExport: 0,
            isSelectTime: 0
        })
    }

    render() {
        const tdStyle = { padding: '10px 0', whiteSpace: 'nowrap', width: '300px' };
        return (
            <div style={{ width: '100%', height: '100%', backgroundColor: '#E8E8E8' }}>
                <div id="patrol-content" className="word">
                    <div className="timeSelect">
                        {
                            !this.state.loadding ?
                                <div className="buttoncss">
                                    {
                                        this.state.isExport == 0 ?
                                            <div><Button type="primary" onClick={this.exportword} style={{ marginLeft: 20 }}>word导出</Button></div>
                                            : null
                                    }
                                    <Button type="primary" onClick={this.back} style={{ marginLeft: 20 }}>返回</Button>
                                    <div className="infoTips">
                                        {
                                            this.state.isExport == 1 ?
                                                <div>正在导出值周安全报表.....</div>
                                                : null
                                        }

                                    </div>
                                </div>
                                : null
                        }
                        <div className="progress">
                            {
                                this.state.isExport == 1 ?
                                    <div>
                                        <Spin tip="Loading..." size="large" spinning={this.state.loadding2}>
                                            <Alert
                                                message="值周安全报告"
                                                description="导出过程受网速、统计间隔时间影响，请耐心等待....."
                                                type="info"
                                            />
                                        </Spin>,
                                    </div>
                                    : null
                            }
                        </div>
                    </div>
                    <div align="center">
                        <Spin size="large" spinning={this.state.loadding} />
                    </div>
                    <div className="title">
                        <div className="title-maxtitle">
                            <h2>校园安全值周报告</h2>
                        </div>
                        <div className="title-summary">
                            为保证我校日常安全管理工作有序进行,{this.state.startTime}至{this.state.endTime}期间,
                          我校参与值周教师为{this.state.teacherNum}位，值周巡查地点共计{this.state.checkpointNum}处，
                          累计巡查次数为{this.state.realDutyWeekNum}次，累计巡查问题上报数为{this.state.questionNum}个。
                        </div>
                        <div className="title-middletitle">
                            <h3>1.值周巡查</h3>
                        </div>
                        <div className="title-middletitle">
                            <h3>1.1 值周检查点与值周任务汇总</h3>
                        </div>
                        <div className="title-summary">
                            我校配置了值周检查点{this.state.checkpointNum}个,展开了{this.state.categoryNum}项值周任务,共有{this.state.itemNum}个值周巡查项。具体值周检查点如下表：
                        </div>
                    </div>
                    <div id="dutyweektable1" className="table" >
                        <table border="1" className="WordSection1">
                            <colgroup>
                                <col width="15%" />
                                <col width="35%" />
                                <col width="50%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '100px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '250px' }}>值周检查点</th>
                                    <th style={{ ...tdStyle, width: '400px' }}>值周地址</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.dutyWeekCheckPointInfoList.map((item, index) => {
                                        return (
                                            <tr>
                                                <td>{item.id}</td>
                                                <td>{item.address}</td>
                                                <td>{item.classname}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                    <div className="title-summary">
                        具体值周任务如下表：
                    </div>
                    <div id="dutyweektable2" className="table" >
                        <table border="1" className="WordSection1">
                            <colgroup>
                                <col width="15%" />
                                <col width="35%" />
                                <col width="50%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '100px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '250px' }}>值周任务</th>
                                    <th style={{ ...tdStyle, width: '400px' }}>值周项</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.dutyWeekContentAndItemList.map((item, index) => {
                                        return (
                                            <tr>
                                                <td>{item.id}</td>
                                                <td>{item.category}</td>
                                                <td>{item.item}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                    <div className="title">
                        <div className="title-middletitle">
                            <h3>1.2 值周教师与值周巡查次数统计</h3>
                        </div>
                        <div className="title-summary">
                            此期间，我校参与值周教师共有{this.state.teacherNum}位，
                            其中{this.state.realnameMax}上报的最多，为{this.state.checkNumsMax}次。
                            {this.state.realnameMin}上报的最少，为{this.state.checkNumsMin}次。个人值周巡查次数具体排名见下表：
                        </div>
                    </div>
                    <div id="dutyweektable3" className="table" >
                        <table border="1" className="WordSection1">
                            <colgroup>
                                <col width="33%" />
                                <col width="33%" />
                                <col width="33%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '100px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '250px' }}>值周教师姓名</th>
                                    <th style={{ ...tdStyle, width: '100px' }}>值周巡查次数</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.dutyWeekCheckNumRankList.map((item, index) => {
                                        return (
                                            <tr>
                                                <td>{item.id}</td>
                                                <td>{item.realname}</td>
                                                <td>{item.checkNums}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                    <div className="title">
                        <div className="title-middletitle">
                            <h3>2.值周上报问题</h3>
                        </div>
                        <div className="title-middletitle">
                            <h3>2.1 值周问题上报数统计</h3>
                        </div>
                        <div className="title-summary">
                            此期间，我校{this.state.alluserNumber}位值周教师共上报{this.state.questionNumber}个问题，
                            {this.state.realNameMax}发现的问题最多，共计{this.state.questionNumberMax}次，
                            {this.state.realNameMax}发现的问题最少，为{this.state.questionNumberMin}次。
                            其中在{this.state.classMax}处发现的问题最多，共计{this.state.questionAddressNumberMax}个。
                            在{this.state.classMin}发现的问题最少，为{this.state.questionAddressNumberMin}个。
                            发现问题最多的值周项是{this.state.itemMax}，共计{this.state.questionItemNumberMax}次，
                            发现问题最少的值周项是{this.state.itemMin}，为{this.state.questionItemNumberMin}次。
                        </div>
                        <div className="title-summary">
                            值周教师上报问题排名如下表：
                        </div>
                    </div>
                    <div id="dutyweektable4" className="table" >
                        <table border="1" className="WordSection1">
                            <colgroup>
                                <col width="33%" />
                                <col width="33%" />
                                <col width="33%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '100px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '250px' }}>值周教师姓名</th>
                                    <th style={{ ...tdStyle, width: '100px' }}>上报问题次数</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.questionAndPersonnelRankList.map((item, index) => {
                                        return (
                                            <tr>
                                                <td>{item.id}</td>
                                                <td>{item.realname}</td>
                                                <td>{item.questionNumber}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                    <div className="title-summary">
                        值周上报问题地点排名如下表：
                    </div>
                    <div id="dutyweektable5" className="table" >
                        <table border="1" className="WordSection1">
                            <colgroup>
                                <col width="30%" />
                                <col width="40%" />
                                <col width="30%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '100px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '250px' }}>上报问题检查点</th>
                                    <th style={{ ...tdStyle, width: '100px' }}>上报问题次数</th>
                                </tr>
                            </thead>
                            <tbody>
                            {
                                    this.state.addressAndQuestionRankList.map((item, index) => {
                                        return (
                                            <tr>
                                                <td>{item.id}</td>
                                                <td>{item.class1}</td>
                                                <td>{item.questionAddress}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                    <div className="title-summary">
                        值周上报问题项目排名如下表：
                    </div>
                    <div id="dutyweektable6" className="table" >
                        <table border="1" className="WordSection1">
                            <colgroup>
                                <col width="30%" />
                                <col width="40%" />
                                <col width="30%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '100px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '250px' }}>上报问题值周项</th>
                                    <th style={{ ...tdStyle, width: '100px' }}>上报问题次数</th>
                                </tr>
                            </thead>
                            <tbody>
                            {
                                    this.state.questionItemRankList.map((item, index) => {
                                        return (
                                            <tr>
                                                <td>{item.id}</td>
                                                <td>{item.item}</td>
                                                <td>{item.itemNumber}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                    <div className="title">
                        <div className="title-middletitle">
                            <h3>2.2 值周巡查问题扣分统计</h3>
                        </div>
                        <div className="title-summary">
                            此期间，值周检查点扣分排名如下表：
                        </div>
                    </div>
                    <div id="dutyweektable7" className="table" >
                        <table border="1" className="WordSection1">
                            <colgroup>
                                <col width="30%" />
                                <col width="40%" />
                                <col width="30%" />
                            </colgroup>
                            <thead>
                                <tr>
                                    <th style={{ ...tdStyle, width: '100px' }}>序号</th>
                                    <th style={{ ...tdStyle, width: '250px' }}>值周检查点</th>
                                    <th style={{ ...tdStyle, width: '100px' }}>扣分数</th>
                                </tr>
                            </thead>
                            <tbody>
                                {
                                    this.state.dutyWeekDeductionRankList.map((item, index) => {
                                        return (
                                            <tr>
                                                <td>{item.id}</td>
                                                <td>{item.address}</td>
                                                <td>{item.deductionNum}</td>
                                            </tr>
                                        )
                                    })
                                }
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>

        )
    }



}

class EchartsDemo extends Component {
    constructor(props) {
        super(props)
        // this.myRef = React.createRef();
        this.state = {
            invalidPatrolUserRank: props.invalidPatrolUserRank,
            invalidPatrolTimesRank: props.invalidPatrolTimesRank,
        }
    }

    componentWillReceiveProps(props) {
        if (JSON.stringify(props.invalidPatrolUserRank) != JSON.stringify(this.state.invalidPatrolUserRank)
            && JSON.stringify(props.invalidPatrolTimesRank) != JSON.stringify(this.state.invalidPatrolTimesRank)) {
            this.setState({
                invalidPatrolUserRank: props.invalidPatrolUserRank,
                invalidPatrolTimesRank: props.invalidPatrolTimesRank,
            }, () => {
                //   this.drawChart();
                setInterval(this.drawChart(), 2000);
            })
        }
    }
    componentDidMount() {

        //  this.drawChart()
        //  setInterval(this.drawChart(), 2000);
    }
    drawChart() {
        $('#img4').hide()
        imgarray4 = []
        let chart = echarts.init(document.getElementById('s1'));
        chart.setOption({
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: [
                {
                    type: 'category',
                    data: this.state.invalidPatrolUserRank,
                    axisTick: {
                        alignWithLabel: true
                    },
                    axisLabel: {
                        textStyle: {
                            fontSize: 18
                        }
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}次',
                        textStyle: {
                            fontSize: 18
                        }
                    }
                }
            ],
            series: [
                {
                    name: '巡更次数',
                    type: 'bar',
                    barGap: '100%',
                    barMaxWidth: 25,
                    animation: false,
                    data: this.state.invalidPatrolTimesRank,
                    itemStyle:
                    {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                }
            ]
        })

        // let wid = this.refs.chartContent.offsetWidth - 40 
        // window.onresize = () =>{
        //     let wid = this.myRef.current.offsetWidth - 40 
        //     chart.resize({width:wid});
        // } 
        window.addEventListener("resize", function () {
            chart.resize();
        })
        let src4 = chart.getDataURL({
            type: "png",
            pixelRatio: 2, //放大2倍
        });
        imgarray4.push(src4)
        console.log("imgarray4", imgarray4)
    }
    render() {

        return (
            <div className="chartContent">
                <div id='s1' style={chartStyle}>
                </div>
                <div id="img4">
                    <img src={imgarray4[0]}></img>
                </div>
            </div>
        )
    }
}

class EchartsDemo2 extends Component {
    constructor(props) {
        super(props)
        // this.myRef = React.createRef();
        this.state = {
            accuracyRateUserList: props.accuracyRateUserList,
            accuracyRateList: props.accuracyRateList,
        }
    }
    componentWillReceiveProps(props) {
        if (JSON.stringify(props.accuracyRateUserList) != JSON.stringify(this.state.accuracyRateUserList)
            && JSON.stringify(props.accuracyRateList) != JSON.stringify(this.state.accuracyRateList)) {
            this.setState({
                accuracyRateUserList: props.accuracyRateUserList,
                accuracyRateList: props.accuracyRateList,
            }, () => {
                //  this.drawChart();
                setInterval(this.drawChart(), 2000);
            })
        }
    }
    componentDidMount() {
        // this.drawChart()
        // setInterval(this.drawChart(), 5000);
    }
    drawChart() {
        $('#img5').hide()
        imgarray5 = []
        let chart = echarts.init(document.getElementById('s2'));
        chart.setOption({
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },

            grid: {
                left: '3%',
                right: '10%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value}%',
                    textStyle: {
                        fontSize: 18
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: this.state.accuracyRateUserList,
                axisLabel: {
                    textStyle: {
                        fontSize: 18
                    }
                }
            },
            series: [
                {
                    name: '巡更个人准确率',
                    type: 'bar',
                    barGap: '100%',
                    barMaxWidth: 25,
                    animation: false,
                    itemStyle:
                    {
                        normal: {
                            label: {
                                show: true,
                                position: 'right',
                                formatter: '{c}%',
                                textStyle: {
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },

                    data: this.state.accuracyRateList
                }
            ]
        })

        window.addEventListener("resize", function () {
            chart.resize();
        })
        // window.onresize = () =>{
        //     let wid = this.myRef2.current.offsetWidth - 40 
        //     chart.resize({width:wid});
        // } 
        let src5 = chart.getDataURL({
            type: "png",
            pixelRatio: 2, //放大2倍
        });
        imgarray5.push(src5)
    }
    render() {

        return (
            <div className="chartContent">
                <div id='s2' style={chartStyle}>
                </div>
                <div id="img5">
                    <img src={imgarray5[0]}></img>
                </div>
            </div>
        )
    }
}

class EchartsDemo3 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            classHiddenDangerCountList: props.classHiddenDangerCountList,
            classHiddenDangerUserList: props.classHiddenDangerUserList,
        }
    }
    componentWillReceiveProps(props) {
        if (JSON.stringify(props.classHiddenDangerCountList) != JSON.stringify(this.state.classHiddenDangerCountList)
            && JSON.stringify(props.classHiddenDangerUserList) != JSON.stringify(this.state.classHiddenDangerUserList)) {
            this.setState({
                classHiddenDangerCountList: props.classHiddenDangerCountList,
                classHiddenDangerUserList: props.classHiddenDangerUserList,
            }, () => {
                this.drawChart();
                //  setInterval(this.drawChart(), 5000);
            })
        }
    }
    componentDidMount() {
        this.drawChart()
        // setInterval(this.drawChart(), 5000);
    }
    drawChart() {
        $('#img6').hide()
        imgarray6 = []
        let chart = echarts.init(document.getElementById('s3'));
        chart.setOption({
            color: ['#3398DB'],
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                }
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value}次',
                    textStyle: {
                        fontSize: 18
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: this.state.classHiddenDangerUserList,
                axisLabel: {
                    textStyle: {
                        fontSize: 18
                    }
                }
            },
            series: [
                {
                    name: '个人隐患上报次数',
                    type: 'bar',
                    animation: false,
                    barMaxWidth: 25,
                    barGap: '10%',
                    itemStyle:
                    {
                        normal: {
                            label: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },

                    data: this.state.classHiddenDangerCountList
                }
            ]
        })
        window.addEventListener("resize", function () {
            chart.resize();
        })
        let src6 = chart.getDataURL({
            type: "png",
            pixelRatio: 2, //放大2倍
        });
        imgarray6.push(src6)
    }
    render() {

        return (
            <div className="chartContent">
                <div id='s3' style={chartStyle}>
                </div>
                <div id="img6">
                    <img src={imgarray6[0]}></img>
                </div>
            </div>
        )
    }
}

class EchartsDemo4 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            divId: props.divId,
            //    hiddenDangerCategoryList: hiddenDangerCategoryList,
        }
    }
    componentWillReceiveProps(props) {
        this.drawChart()
        // setInterval(this.drawChart(), 5000);
    }
    componentDidMount() {
        this.drawChart()
        //  setInterval(this.drawChart(), 5000);
    }
    drawChart() {
        $('#img7').hide()
        imgarray7 = []
        let chart = echarts.init(document.getElementById(this.state.divId));
        chart.setOption({

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },

                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '发现隐患次数',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: hiddenDangerCategoryList,
                    animation: false,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} : {c} ({d}%)',
                                textStyle: {
                                    fontSize: 22
                                },
                            },
                            labelLine: { show: true }
                        }
                    }
                }
            ]
        })
        window.addEventListener("resize", function () {
            chart.resize();
        })
        let src7 = chart.getDataURL({
            type: "png",
            pixelRatio: 2, //放大2倍
        });
        imgarray7.push(src7)

    }
    render() {

        return (
            <div className="chartContent">
                <div id={this.state.divId} style={chartStyle}>
                </div>
                <div id="img7">
                    <img src={imgarray7[0]}></img>
                </div>
            </div>

        )
    }
}

class EchartsDemo5 extends Component {
    constructor(props) {
        super(props)
        this.state = {
        }
    }
    componentWillReceiveProps() {
        this.drawChart()
        // setInterval(this.drawChart(), 5000);
    }
    componentDidMount() {
        this.drawChart()
        //  setInterval(this.drawChart(), 5000);
    }
    drawChart() {
        $('#img8').hide()
        imgarray8 = []
        let chart = echarts.init(document.getElementById('s5'));
        chart.setOption({

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },

                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '发现隐患次数',
                    type: 'pie',
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: hiddenDangerPointList,
                    animation: false,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} : {c} ({d}%)',
                                textStyle: {
                                    fontSize: 22
                                },
                            },
                            labelLine: { show: true }
                        }
                    }
                }
            ]
        })
        window.addEventListener("resize", function () {
            chart.resize();
        })
        let src8 = chart.getDataURL({
            type: "png",
            pixelRatio: 2, //放大2倍
        });
        imgarray8.push(src8)
    }
    render() {

        return (
            <div className="chartContent">
                <div id='s5' style={chartStyle}>
                </div>
                <div id="img8">
                    <img src={imgarray8[0]}></img>
                </div>
            </div>
        )
    }
}

//绘制饼图：巡检项大类
class EchartsDemo6 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            divId: props.divId,
            myChart: null
        }
    }

    componentWillReceiveProps(props) {
        this.refreshdata();
        //   setInterval(this.refreshdata(), 5000);

    }

    componentDidMount() {
        this.refreshdata()
        //  setInterval(this.refreshdata(), 5000);
    }

    // getEchartWidth = () => {
    //     this.LineRef.current.style.width = this.LineRef.current.offsetWidth
    //     this.LineRef.current.style.height = this.LineRef.current.offsetHeight
    //     this.resized()
    // }
    componentDidUpdate() {  //点击菜单栏触发这个事假
        // setTimeout(() => {
        //     this.getEchartWidth()  // 延迟获取容器的宽高,缺点有移动效果
        // }, 200)
    }

    // resized = () => {
    //     const { myChart } = this.state
    //     myChart.resize()
    // }



    refreshdata() {
        $('#img1').hide();
        imgarray1 = []
        let departmentId = sessionStorage.getItem("departmentId")

        //inspectCategoryItemNumber = []
        //按巡检项大类绘制饼图

        var myChart = echarts.init(document.getElementById(this.state.divId));



        let myChart1 = this.echarts && this.echarts.getEchartsInstance();
        // 指定图表的配置项和数据
        myChart.setOption({

            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },

                    restore: {},
                    saveAsImage: {}
                }
            },
            series: [
                {
                    name: '发现隐患次数',
                    type: 'pie',
                    animation: false,
                    radius: '50%',
                    center: ['50%', '50%'],
                    data: inspectCategoryItemNumber,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        },
                        normal: {
                            label: {
                                show: true,
                                formatter: '{b} : {c} ({d}%)',
                                textStyle: {
                                    fontSize: 22
                                },
                            },
                            labelLine: { show: true }
                        }
                    }
                }
            ]
        })
        // window.onresize = myChart.resize;
        window.addEventListener("resize", function () {
            myChart.resize();
        })
        let src1 = myChart.getDataURL({
            type: "png",
            pixelRatio: 2, //放大2倍
        });
        imgarray1.push(src1)
    }

    render() {

        return (
            <div  >
                <div className="title">
                    <div className="title-mintitle">
                        <h3 align="left">1.2 巡检项目及计划</h3>
                    </div>
                    <div className="title-summary">
                        为使我校的安全巡检全覆盖，根据实际情况配置巡检类别{inspectCategoryCount}类，
                        巡检项目{inspectItemCount}项，巡检点{inspectAdressCount}个，
                        每周计划巡检{inspectNumber}次,巡检类别分布情况如下图：
                    </div>
                </div>

                <div className="chartContent">
                    <div id={this.state.divId} style={chartStyle} />
                    <div id="img1">
                        <img src={imgarray1[0]}></img>
                    </div>
                </div>

            </div >
        )
    }
}

//绘制柱状图：个人巡检数
class EchartsDemo7 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            divId: props.divId,
        }
    }

    componentWillReceiveProps(props) {

        //this.refreshdata();
        setInterval(this.refreshdata(), 2000);

    }

    componentDidMount() {
        //  this.refreshdata()
        //  setInterval(this.refreshdata(), 2000);
    }

    refreshdata() {
        $('#img2').hide()
        imgarray2 = []
        let departmentId = sessionStorage.getItem("departmentId")

        // let startTime = "2020-01-01";
        // let endTime = "2020-12-31";
        var myChart = echarts.init(document.getElementById(this.state.divId));
        myChart.setOption({
            // title: {
            //     text: '某地区蒸发量和降水量',
            //     subtext: '纯属虚构'
            // },
            tooltip: {
                trigger: 'axis'
            },
            
            toolbox: {
                show: true,
                feature: {
                    dataView: { show: true, readOnly: false },
                    magicType: { show: true, type: ['line', 'bar'] },
                    restore: { show: true },
                    saveAsImage: { show: true }
                }
            },
            //calculable: true,
            xAxis: [
                {
                    type: 'category',
                    data: inspectClassWorkMemberName,
                    axisLabel: {
                        textStyle: {
                            fontSize: 16
                        },
                    }
                }
            ],
            yAxis: [
                {
                    type: 'value',
                    axisLabel: {
                        formatter: '{value}次',
                        textStyle: {
                            fontSize: 16
                        },
                    }

                }
            ],
            series: [
                {
                    name: '计划数',
                    type: 'bar',
                    barMaxWidth: 25,
                    data: inspectClassWorkDoneNumber,
                    markPoint: {
                        data: [
                            { type: 'max', name: '最大值' },
                            { type: 'min', name: '最小值' }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },
                    itemStyle:
                    {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                },
                {
                    name: '实际数',
                    type: 'bar',
                    barMaxWidth: 25,
                    data: inspectClassWorkFinishedNumber,
                    markPoint: {
                        data: [
                            { name: '年最高', value: 182.2, xAxis: 7, yAxis: 183 },
                            { name: '年最低', value: 2.3, xAxis: 11, yAxis: 3 }
                        ]
                    },
                    markLine: {
                        data: [
                            { type: 'average', name: '平均值' }
                        ]
                    },
                    itemStyle:
                    {
                        normal: {
                            label: {
                                show: true, //开启显示
                                position: 'top', //在上方显示
                                textStyle: { //数值样式
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                }
            ]
        }, true);
        // 指定图表的配置项和数据
        // myChart.setOption({
        //     color: ['#3398DB'],
        //     // title: {
        //     //     //   text: '计划巡检次数排名',
        //     //     left: 'center'
        //     // },
        //     tooltip: {
        //         trigger: 'axis',

        //     },
        //     grid: {
        //         left: '3%',
        //         right: '4%',
        //         bottom: '3%',
        //         containLabel: true
        //     },
        //     xAxis: [
        //         {
        //             type: 'category',
        //             splitNumber: 50,
        //             data: inspectClassWorkMemberName,
        //             axisTick: {
        //                 alignWithLabel: true
        //             },
        //             axisLabel: {
        //                 textStyle: {
        //                     fontSize: 16
        //                 },
        //             }
        //         }
        //     ],
        //     yAxis: [
        //         {
        //             type: 'value',

        //             axisLabel: {
        //                 formatter: '{value}(次)',
        //                 textStyle: {
        //                     fontSize: 16
        //                 },
        //             }
        //         }
        //     ],
        //     toolbox: {
        //         show: true,
        //         feature: {
        //             dataZoom: {
        //                 yAxisIndex: 'none'
        //             },
        //             dataView: { readOnly: false },
        //             magicType: { type: ['line', 'bar'] },
        //             restore: {},
        //             saveAsImage: {}
        //         }
        //     },
        //     series: [
        //         {
        //             name: '计划数',
        //             type: 'line',
        //             //     barGap:30,
        //             barMaxWidth: 25,
        //             animation: false,
        //             data: inspectClassWorkDoneNumber,
        //             interval: 1,
        //             itemStyle:
        //             {
        //                 normal: {
        //                     label: {
        //                         show: true, //开启显示
        //                         position: 'top', //在上方显示
        //                         textStyle: { //数值样式
        //                             color: 'black',
        //                             fontSize: 16
        //                         }
        //                     }
        //                 }
        //             },
        //         },
        //         {
        //             name: '实际数',
        //             type: 'line',
        //             //     barGap:30,
        //             barMaxWidth: 25,
        //             animation: false,
        //             data: inspectClassWorkFinishedNumber,
        //             interval: 1,
        //             itemStyle:
        //             {
        //                 normal: {
        //                     label: {
        //                         show: true, //开启显示
        //                         position: 'top', //在上方显示
        //                         textStyle: { //数值样式
        //                             color: 'black',
        //                             fontSize: 16
        //                         }
        //                     }
        //                 }
        //             },
        //         }
        //     ]
        // })
        window.addEventListener("resize", function () {
            myChart.resize();
        })
        let src2 = myChart.getDataURL({
            type: "png",
            pixelRatio: 2, //放大2倍
        });
        imgarray2.push(src2)

    }
    render() {

        return (
            <div className="chartContent">
                <div id={this.state.divId} style={chartStyle} className="imgs2" />
                <div id="img2">
                    <img src={imgarray2[0]}></img>
                </div>
            </div>
        )
    }
}

//绘制横向柱状图：班组完成率
class EchartsDemo8 extends Component {
    constructor(props) {
        super(props)
        this.state = {
            divId: props.divId,
        }
    }

    componentWillReceiveProps(props) {

        //  this.refreshdata();
        setInterval(this.refreshdata(), 2000);
    }

    componentDidMount() {
        //  this.refreshdata()
        // setInterval(this.refreshdata(), 5000);
    }

    refreshdata() {
        $('#img3').hide()
        imgarray3 = []
        let departmentId = sessionStorage.getItem("departmentId")



        var myChart = echarts.init(document.getElementById(this.state.divId));

        myChart.setOption({

            title: {
                //           text: '班组完成率',
                left: 'center'
            },
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: { readOnly: false },
                    magicType: { type: ['line', 'bar'] },
                    restore: {},
                    saveAsImage: {}
                }
            },
            tooltip: {
                trigger: 'axis',
                formatter: '{c} %',
                axisPointer: {            // 坐标轴指示器，坐标轴触发有效
                    type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                }
            },
            // legend: {
            //     data: ['准确率']
            // },
            grid: {
                left: '3%',
                right: '12%',
                bottom: '3%',
                containLabel: true,
                borderWidth: 1
            },
            xAxis: {
                type: 'value',
                splitLine: {
                    show: false
                },
                axisLabel: {
                    formatter: '{value}%',
                    textStyle: {
                        fontSize: 18
                    }
                }
            },
            yAxis: {
                type: 'category',
                data: inspectClassName,
                axisLabel: {
                    textStyle: {
                        fontSize: 18
                    }
                }
            },
            series: [
                {
                    name: '准确率',
                    type: 'bar',
                    animation: false,
                    stack: '总量',
                    barGap: '100%',
                    // barWidth: 10,
                    barMaxWidth: 25,
                    itemStyle:
                    {
                        normal: {
                            color: '#3398DB',
                            label: {
                                show: true,
                                formatter: '{c} %',
                                position: 'right',
                                textStyle: {
                                    color: 'black',
                                    fontSize: 16
                                }
                            }
                        }
                    },
                    data: inspectClassPercent
                    //data: [100, 98, 93, 93, 92, 91, 80, 80, 78, 78, 69, 67, 67, 67, 62, 61, 53, 48, 22, 11, 0, 0, 0, 0]
                }
            ]
        })
        window.addEventListener("resize", function () {
            myChart.resize();
        })
        let src3 = myChart.getDataURL({
            type: "png",
            pixelRatio: 2, //放大2倍
        });
        imgarray3.push(src3)

    }
    render() {

        return (
            <div className="chartContent">
                <div id={this.state.divId} className="imgs1" style={chartStyle} />
                <div id="img3">
                    <img src={imgarray3[0]}></img>
                </div>
            </div>
        )
    }
}



export { StatisticsCondition, EchartsDemo, EchartsDemo2, EchartsDemo3, EchartsDemo4, EchartsDemo5, EchartsDemo6, EchartsDemo7, EchartsDemo8, InspectComponent, PatrolComponent, DutyWeekComponent }
